

<template>
<div>
     <!-- <Button type="primary" @click="modal1 = true">Display dialog box</Button> -->
     <Modal v-model="mode" width="45%"  title="定价更新" @change="testChange"  @on-cancel="cancel">
         <Row>
          <Form ref="PriceData"  :model="PriceData"  :rules="ruleInUser" :label-width="100">
                <div style="width:90%;height:auto;margin:0 auto;">
                     <Col span="24">
                       <FormItem label="价格编号：" prop="Id">
                          <Input v-model="PriceData.Id" class="orders_disabled" placeholder="请输入用户编号" disabled />
                       </FormItem>
                     </Col>
                     <Col span="12"> 
                      <FormItem label="红枣品种：" prop="TypeName">
                        <Input v-model="PriceData.TypeName"  placeholder="请输入红枣品种"  disabled/>
                      </FormItem> 
                      
                      <FormItem label="红枣单价：" prop="UnitPrice">
                          <label slot="label">红枣单价：</label>
                          <InputNumber v-model="PriceData.UnitPrice" placeholder="请输入红枣单价" />
                      </FormItem> 
                      <FormItem label="起/止日期：" prop="StartEndDate">  
                          <DatePicker v-model="PriceData.StartEndDate" format="yyyy/MM/dd" :clearable=false :editable=false type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></DatePicker>
                      </FormItem> 
                      
                                                
                    </Col>


                    <Col span="24">
                        <FormItem label="备注：" prop="Remark">
                            <label slot="label">备&nbsp;&nbsp;&nbsp;&nbsp;注：</label>
                            <Input v-model="PriceData.CompanyRemark" style="width:500px;" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请说明备注事项..."/>
                         </FormItem>
                    </Col>
                    
                    <Col span="24">
                        <FormItem>
                            <Button type="primary" :loading="loading"  @click="handleSubmit('PriceData')">提交</Button>
                            <!-- <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
                         </FormItem>
                   </Col>
                   
                </div>
              </Form>
        </Row>


        <div slot="footer" >
            <!-- <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button> -->
        </div>
    </Modal>
</div>
</template>

<script>
import {getCompanyList,getDeptList,updateCurrentPriceData,timestampToDate,diffDate} from "@/api/data";
import { formatDate } from '../../components/date.js';
export default {
    name: 'Edit',
    data () {
        return {
          loading:false,
          mode:this.edit,
          
          //表单验证规则
          ruleInUser: {

            UnitPrice: [
              { required: true, type:'number',min:2.0, message: '请填写大于或等于2.0的红枣单价', trigger: 'blur' }
            ],

            StartEndDate: [
              { required: true,type: 'array',
                  fields: {
                      0: {type: 'date', required: true, message: '请输入起止日期'},
                      1: {type: 'date', required: true, message: '请输入起止日期'}
                  }
              }
            ],


          },
         
          listdata:[]

        };
    },
    props:{
        edit:{
            type:Boolean ,
            required:true
        },
        PriceData:{
            type:Object,
            required:true 
        },
        


    },
    methods: {

    //   timestampToDate(timestamp, format){
    //     if (isNaN(timestamp)) {
    //         return '';
    //     }

    //     if (format.length < 4 || 'yyyy-MM-dd HH:mm:ss'.indexOf(format) !== 0) {
    //           return '';
    //     }

    //     const date = new Date(Number(timestamp));
    //     const year = date.getFullYear();
    //     const month = date.getMonth() + 1;
    //     const day = date.getDate();
    //     const hour = date.getHours();
    //     const minute = date.getMinutes();
    //     const second = date.getSeconds();

    //      return format.replace('yyyy', year)
    // .replace('MM', month > 9 ? month : `0${month}`)
    // .replace('dd', day > 9 ? day : `0${day}`)
    // .replace('HH', hour > 9 ? hour :`0${hour}`)
    // .replace('mm', minute > 9 ? minute : `0${minute}`)
    // .replace('ss', second > 9 ? second : `0${second}`);

    //  },


      testChange(val){
        this.$emit('testChange',val);
       },
      cancel(){
           this.loading = false; 
          let data = {
            mode:false
          }
          this.$emit('cancelCallBack', data);
       },
      //提交编辑后的userInfo
      handleSubmit(name) {
        
        this.$refs[name].validate(valid => { 
          console.log("提交验证：",valid)    
          if (valid) {  
            this.loading = true;      
            this.submit();
          } else {
            this.$Message.error("请填写相关信息!");
          }
        });
      },
      submit(){
        //将时间范围拆分成开始时间和结束时间
        this.PriceData.StartDate = timestampToDate(this.PriceData.StartEndDate[0],'yyyy-MM-dd')
        this.PriceData.EndDate = timestampToDate(this.PriceData.StartEndDate[1],'yyyy-MM-dd')
        //计算价格周期
        this.PriceData.PriceCycle = diffDate(this.PriceData.StartEndDate[0],this.PriceData.StartEndDate[1],'day')
        const data = {
          Id:this.PriceData.Id,
          TypeName: this.PriceData.TypeName,
          UnitPrice: this.PriceData.UnitPrice,
          StartDate: this.PriceData.StartDate,
          EndDate: this.PriceData.EndDate,
          PriceCycle:this.PriceData.PriceCycle
        };

        console.log("日期范围：" + this.PriceData.StartDate + "---" + this.PriceData.EndDate);
      updateCurrentPriceData(data).then(res =>{
            if(res == "OK"){
              this.$Message.success("提交成功");
              this.loading = false; 
              let data = {
                mode:false
              }
              this.$emit('success', data);   
            }else if(response.data.flag == 0){
            this.$Message.success("提交失败"); 
            }else if(response.data.flag == 2){
            this.$Message.success("状态过期");
            }
        }).catch(error => {
            this.$Message.error("请核对之后重新提交1");
             this.loading = false; 
       });


     },
    },
    mounted () {
      const cmpdata = {
        fields:"Id,CompanyName",
        offset:"0",
        limit:"-1"
      };
      const dptdata = {
        fields:"Id,DeptName",
        offset:"0",
        limit:"-1"
      };
      //获得包含公司Id和companyname字段的全部列表
      // getCompanyList(cmpdata).then(res =>{
      //   this.CompanyList = res.List;
        
      // });
      //获得包含公司Id和companyname字段的全部列表
      // getDeptList(dptdata).then(res =>{
      //   this.DeptList = res.List;
      // });
    },
    watch: {
        edit(val) {
        this.mode = val
    }
}
}
</script>
<style>
.dept .ivu-select-placeholder{
color:#515a6e!important;
}
</style>